<template>
    <view
        class="activePage"
        :style="bgColor == '' ? '' : 'background-color: ' + bgColor"
    >
        <image class="topBanner" :show-menu-by-longpress="true" :src="topimgUrl" mode="widthFix"></image>
        <view
            class="bgActive"
            :style="bgColor == '' ? '' : 'background-color: ' + bgColor"
        >
            <view class="newCustomShop">
                <!-- <view class="product">
					<view class="product-list flex-space-between flex-wrap">
						<view class="product-item bg-fff" v-for="(item,index) in productList" :key="index" @click="toDetail(item)">
							<image class="product-item-image" :src="item.product.file_path"></image>
							<view class="product-con">
								<view class="product-con-name u-line-2">{{item.product.product_name}}</view>
								<view class="flex-space-between productTip">
									<view class="product-con-price">
										<view class="bigText"><text
												class="smallText">￥</text>{{sumIntMoney(item.activity_price)}}<text
												class="smallText">{{decimalPart(item.activity_price)}}</text>
										</view>
										<text class="throughText">￥{{item.product_price}}</text>
									</view>
									<b-u-button-theme width="52rpx" height="40rpx" size="24rpx"
										@click="toDetail(item)">购买</b-u-button-theme>
								</view>
							</view>
						</view>
						<view class="product-item" v-if="productList.length % 2 == 1"></view>
					</view>
				</view> -->
                <view class="product">
                    <view
                        class="product-list flex-wrap"
                        :style="{ backgroundColor: info.left_color }"
                    >
                        <view
                            class="product-item bg-fff"
                            v-for="(item, index) in leftProductList"
                            :key="index"
                            @click="toDetail(item)"
                        >
                            <image
                                class="product-item-image"
                                :src="item.product.file_path"
                            ></image>
                            <view class="product-con">
                                <view class="product-con-name u-line-2">{{
                                    item.product.product_name
                                }}</view>
                                <view class="flex-space-between productTip">
                                    <view class="product-con-price">
                                        <view class="bigText"
                                            ><text class="smallText">￥</text
                                            >{{
                                                sumIntMoney(
                                                    item.activity_price
                                                )
                                            }}<text class="smallText">{{
                                                decimalPart(item.activity_price)
                                            }}</text>
                                        </view>
                                        <text class="throughText"
                                            >￥{{ item.product_price }}</text
                                        >
                                    </view>
                                    <b-u-button-theme
                                        width="52rpx"
                                        height="40rpx"
                                        size="24rpx"
                                        @click="toDetail(item)"
                                        >购买</b-u-button-theme
                                    >
                                </view>
                            </view>
                        </view>
                        <view
                            class="product-item"
                            v-if="productList.length % 2 == 1"
                        ></view>
                    </view>
                    <view
                        class="product-list flex-wrap"
                        :style="{ backgroundColor: info.right_color }"
                    >
                        <view
                            class="product-item bg-fff"
                            v-for="(item, index) in rightProductList"
                            :key="index"
                            @click="toDetail(item)"
                        >
                            <image
                                class="product-item-image"
                                :src="item.product.file_path"
                            ></image>
                            <view class="product-con">
                                <view class="product-con-name u-line-2">{{
                                    item.product.product_name
                                }}</view>
                                <view class="flex-space-between productTip">
                                    <view class="product-con-price">
                                        <view class="bigText"
                                            ><text class="smallText">￥</text
                                            >{{
                                                sumIntMoney(
                                                    item.activity_price
                                                )
                                            }}<text class="smallText">{{
                                                decimalPart(item.activity_price)
                                            }}</text>
                                        </view>
                                        <text class="throughText"
                                            >￥{{ item.product_price }}</text
                                        >
                                    </view>
                                    <b-u-button-theme
                                        width="52rpx"
                                        height="40rpx"
                                        size="24rpx"
                                        @click="toDetail(item)"
                                        >购买</b-u-button-theme
                                    >
                                </view>
                            </view>
                        </view>
                        <view
                            class="product-item"
                            v-if="productList.length % 2 == 1"
                        ></view>
                    </view>
                </view>
                <view
                    class="homePage"
                    @click="homePageFun()"
                    v-if="productList && productList.length > 0"
                >
                    返回首页
                </view>
            </view>
        </view>
        <u-popup
            class="showPopup"
            v-model="showPop"
            mode="center"
            :mask-close-able="false"
            border-radius="20"
        >
            <view class="pop_container">
                <!-- <image class="active_end_img" :src="$setting.imageUrl()+'static/active_end.png'" mode="widthFix"></image> -->
                <image
                    class="active_end_img"
                    :src="$setting.imageUrl() + 'static/active_end.png'"
                    mode="widthFix"
                ></image>
                <view class="end_back">
                    <view class="end_text">{{ end_text }}</view>
                    <view class="popHomePage" @click="homePageFun()">
                        了解更多精彩活动
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            end_text: '活动已经结束！',
            productPageForm: {
                activity_id: 13,
                // recommend: 0,
                // category_id: 0,
                // list_rows: 20,
            },
            productList: [],
            leftProductList: [],
            rightProductList: [],
            newCouponLists: [],
            userInfo: {},
            activity_type: 0,
            topimgUrl: '',
            bgColor: '',
            share_title: '',
            share_img: '',
            navbar_title: '',
            navbar_bgcolor: '',
            share: {
                title: '',
                imageUrl: '',
            },
            showPop: false,
            info: {},
        };
    },
    async onLoad(options) {
        if (options.id) {
            this.productPageForm.activity_id = options.id;
        }
        await this.$onLaunched;
        this.getHttp(1);
    },
    async onShow() {
        await this.$onLaunched;
        this.getHttp(2);
    },
    methods: {
        homePageFun() {
            uni.switchTab({
                url: '/pages/index/index',
            });
        },
        decimalPart(product_price) {
            let price = parseFloat(product_price);
            // 使用 toFixed() 方法将价格保留两位小数，并将结果转换为字符串
            const priceWithDecimal = price.toFixed(2);

            // 使用 split() 方法将字符串按照 '.' 分割成两部分
            const parts = priceWithDecimal.split('.');

            // 返回小数部分的字符串
            return '.' + parts[1] || '00';
        },
        sumIntMoney(num) {
            return parseInt(num);
        },
        getHttp(type) {
            console.log(type);
            uni.$u.api.userInfo().then((res) => {
                this.userInfo = res;
                this.getProduct();
            });
        },
        getProduct() {
            uni.$u.api.getActivityProduct(this.productPageForm).then((res) => {
                console.log(res, 'res');
                const now = new Date();
                const time = now.getTime() / 1000;
                // 是否新人并且新人是否已下过单
                if (res.detail.is_new == 1 && res.detail.is_buy > 0) {
                    this.end_text = '您已参与该活动！'
                    this.showPop = true
                }
                // 活动结束，console.log(now, time); 小程序时间单位为毫秒
                if (time >= res.detail.end_time) {
                    this.showPop = true;
                    this.end_text = '活动已经结束！'
                    // uni.showToast({
                    // 	title: "当前活动已结束，首页更多活动敬请关注",
                    // 	icon: "none",
                    // 	duration: 2500
                    // })
                    // uni.switchTab({
                    // 	url: '/pages/index/index'
                    // })
                }
                this.info = res.detail;
                this.productList = res.list;
                this.leftProductList = this.productList.filter(
                    (item) => item.position === 0
                );
                this.rightProductList = this.productList.filter(
                    (item) => item.position === 1
                );
                console.log(this.leftProductList, this.rightProductList);
                this.activity_type = res.detail.activity_type;
                this.bgColor = res.detail.bgColor;
                this.topimgUrl = res.detail.imgUrl_path;
                this.share_title = res.detail.share_title;
                this.share_img = res.detail.share_img;
                this.navbar_title = res.detail.navbar_title;
                this.navbar_bgcolor = res.detail.navbar_bgcolor;
                this.share.title = res.detail.share_title;
                this.share.imageUrl = res.detail.share_img_url;
                if (this.navbar_title) {
                    uni.setNavigationBarTitle({
                        title: this.navbar_title,
                    });
                }
                if (this.navbar_bgcolor) {
                    console.log(this.navbar_bgcolor, 'this.navbar_bgcolor');
                    uni.setNavigationBarColor({
                        frontColor: '#000000',
                        backgroundColor: this.navbar_bgcolor,
                    });
                }
            });
        },
        toDetail(item) {
            console.log(this.activity_type);
            let gourl =
                '/pages/categoty/product/product_active?id=' +
                item.product.product_id +
                '&activity_product_id=' +
                item.activity_product_id;
            if (this.activity_type == 1) {
                gourl =
                    '/pages/categoty/product/product?id=' +
                    item.product.product_id;
            }
            this.jump(gourl);
        },
        jump(url) {
            uni.navigateTo({
                url: url,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.activePage {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;

    .topBanner {
        width: 100%;
        // height: 1100rpx;
    }

    .bgActive {
        // width: 100vw;
        width: 100%;
        display: flex;
        justify-content: center;
        // background-color: #fef7dd;
        // background: linear-gradient(180deg, #ffb4ac 0%, #efccc7 100%);
    }

    .newCustomShop {
        width: 100%;
        .product {
            display: flex;
            justify-content: space-between;
            // margin-top: 20rpx;
            // width: 692rpx;
            width: 100%;

            .xinrenjia {
                width: 33px;
                height: 12px;
            }

            .product-list {
                padding-top: 20rpx;
                padding-bottom: 30rpx;
                // margin-top: 28rpx;
                display: flex;
                flex-direction: column;
                flex: 1;
                align-items: center;
                .productTip {
                    padding: 0rpx 10rpx 0rpx 0rpx;
                }

                .product-item {
                    width: 334rpx;
                    border-radius: 16rpx;
                    margin-bottom: 24rpx;
                    overflow: hidden;
                    // height: 72vw;
                }

                .product-item-image {
                    width: 334rpx;
                    height: 328rpx;
                }

                .product-con {
                    padding: 12rpx 20rpx 18rpx;

                    .product-con-name {
                        font-size: 26rpx;
                        color: #333;
                        font-weight: bold;
                        margin-bottom: 14rpx;
                        min-height: 68rpx;
                    }

                    .product-con-price {
                        .bigText {
                            font-size: 35rpx;
                            font-weight: normal;
                            font-stretch: normal;
                            line-height: 20rpx;
                            color: #ff0000;
                        }

                        .throughText {
                            text-decoration: line-through;
                            color: #828282;
                            font-size: 24rpx;
                        }

                        .smallText {
                            font-size: 24rpx;
                            font-weight: normal;
                            color: #ff0000;
                        }
                    }
                }
            }
        }
    }
}
.homePage {
    color: #fff;
    font-weight: bold;
    background: #b90000;
    border-radius: 30rpx;
    margin: auto;
    width: 280rpx;
    text-align: center;
    font-size: 38rpx;
    margin-bottom: 50rpx;
	margin-top: 20rpx;
    letter-spacing: 3px;
    line-height: 60rpx;
}
.pop_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 450rpx;
    position: relative;
    padding: 30rpx 30rpx 40rpx;
}
.active_end_img {
    width: 160rpx;
}
.end_back {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.end_text {
    color: #666;
    font-size: 22rpx;
    padding: 16rpx;
}
.popHomePage {
    width: 100%;
    margin: auto;
    border-radius: 30rpx;
    background: #ff2122;
    color: #fff;
    font-size: 24rpx;
    font-weight: bold;
    line-height: 60rpx;
    text-align: center;
    letter-spacing: 3rpx;
    box-shadow: 0 2rpx 4rpx #ff2122;
}
</style>
